<template>
  <el-menu
    default-active="/index"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isClosed"
    :collapse-transition="true"
    :router="true"
    class="silder"
  >
    <el-menu-item index="/index">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/blog">
      <el-icon><Document /></el-icon>
      <span>博客管理</span>
    </el-menu-item>
    <el-menu-item index="/edit">
      <el-icon><Edit /></el-icon>
      <span>博客撰写</span>
    </el-menu-item>
    <el-menu-item index="/category">
      <el-icon><CollectionTag /></el-icon>
      <span>分类管理</span>
    </el-menu-item>
    <el-sub-menu index="/distbin">
      <template #title>
        <el-icon><Delete /></el-icon>
        <span>回收箱</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/distbin/blog">
          <template #title>
            <el-icon><Document /></el-icon>
            <span> 博客回收</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/distbin/category">
          <template #title>
            <el-icon><CollectionTag /></el-icon>
            <span> 分类回收</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="/user">
      <el-icon><User /></el-icon>
      <span>个人管理</span>
    </el-menu-item>
    <el-menu-item index="/background">
      <el-icon><Setting /></el-icon>
      <span>背景设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {
  Document,
  CollectionTag,
  Setting,
  User,
  House,
  Delete,
  Edit,
} from "@element-plus/icons-vue";
export default {
  name: "Silder",
  components: { CollectionTag, Document, Setting, User, House, Delete, Edit },
  props: ["isClosed"],
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.silder {
  height: 100vh;
  // width: 200px;
}
</style>
